<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
		<title>点击表格切换图片 </title>	
		
    </head>
    <style>
        .td-class{
            width:20px;
            height: 20px;
        }
    </style>
    <script type="text/javascript">  
		window.onload = function(){
			var tab = document.getElementById("tab");
			var showImg = document.getElementById("showImg");
			var tds = tab.children[0].children[0].children;
			tab.onclick = function(e){
				for (var i = 0; i < tds.length; i++) {
					tds[i].style.background = "";
				}
				e.target.style.background = "blue";
				showImg.src = "img/00" + e.target.getAttribute("index") + ".jpg";
			};
			var count = 2;
			setInterval(function(){
				showImg.src = "img/00" + count + ".jpg";
				for (var i = 0; i < tds.length; i++) {
					tds[i].style.background = "";
				}
				tab.children[0].children[0].children[count - 1].style.background = "blue";
				count++;
				if(count == 5){
					count = 1;
				}
			},1000);
			
		}
    </script>
	<body>
        <table id="tab" border="1px">
            <tr>
                <td index=1 class="td-class" style="background:blue"></td>
                <td index=2 class="td-class"></td>
                <td index=3 class="td-class"></td>
                <td index=4 class="td-class"></td>
            </tr>
        </table>
        <img id="showImg" src="img/001.jpg" style="width:300px"/>
	</body>
</html>